<template>
  <div class="certificate-detail-container">
    <img :src="certificate.imgUrl" alt="证书图片" class="certificate-img">
    <div class="certificate-info">
      <span class="award-name">奖励名称：{{ certificate.awardName }}</span>
      <span class="award-time">获得时间：{{ certificate.awardTime }}</span>
    </div>
    <p class="encouragement">望同学再接再励，更得佳绩！</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      certificate: {
        awardName: '',
        awardTime: '',
        imgUrl: ''
      }
    };
  },
  onLoad(options) {
    this.certificate.awardName = decodeURIComponent(options.awardName);
    this.certificate.awardTime = decodeURIComponent(options.awardTime);
    this.certificate.imgUrl = decodeURIComponent(options.imgUrl);
  }
};
</script>

<style scoped>

.certificate-detail-container {
  padding: 20px;
  text-align: center;
}

.page-title {
  font-size: 20px;
  margin-bottom: 20px;
}

.certificate-img {
  width: 100%;
  margin-bottom: 30px;
}

.certificate-info {
  margin-bottom: 70px;
}

.award-name,
.award-time {
  display: block;
  margin-bottom: 10px;
  font-size: 18px;
}

.encouragement {
  color: #c00;
  font-size: 26px;
  font-weight: bold;
}
</style>